<template>
  <div class="container box">
    <!-- 查询表单 -->
    <div class="search_form" ref="searchCard">
      <el-form :inline="true" size="mini" :model="searchForm">
        <el-form-item>
          <el-input
            v-model="searchForm.createName"
            clearable
            style="background-color: #FFFFFF"
            placeholder="用户名"
            @input="searchForm.createName=verifyfilter('spaceChar',searchForm.createName)"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchClick()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <template>
      <BaseTable
        :data="cargotableData"
        :columns="cargotableDataColumns"
        :tableHeight="tableHeight"
        :pagination="false"
        :loading="loading"
      ></BaseTable>
    </template>

    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.page"
        :page-sizes="[10, 15, 30, 45]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.totalNum"
      ></el-pagination>
    </div>
    <editOrder :formDetail='formDetail' :editOrderShow="editOrderShow" :editOrderFun="editOrderFun" :titleName="titleName" :UserRightsData="UserRightsData"></editOrder>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import Treeselect from '@riophae/vue-treeselect'
import editOrder from './component/editOrder'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    BaseTable,
    Treeselect,
    editOrder
  },
  data() {
    return {
      menuArr: [],
      cargotableDataColumns: [
        { prop: 'userName', label: '用户名' },
        { prop: 'accNo', label: '用户账号' },
        { prop: 'companyName', label: '公司名称' },
        { prop: 'deptName', label: '部门名称' },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 260,
          render: (h, params) => {
            return h('div', [
              h('el-button', {
                props: {
                  size: 'mini'
                },

                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML: `<span style='color:#0B6CD6;display: ${this.menuArr.includes('缓存管理用户详情') ? 'block' : 'none'}'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>用户详情</span></span>`
                },
                on: {
                  click: () => {
                    this.downloadyonghu(params.row, '用户详情')
                  }
                }
              }),
              h('el-button', {
                props: {
                  size: 'mini'
                },

                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML: `<span style='color:#0B6CD6;display: ${this.menuArr.includes('缓存管理权限详情') ? 'block' : 'none'}'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>权限详情</span></span>`
                },
                on: {
                  click: () => {
                    this.download(params.row, '权限详情')
                  }
                }
              }),
              h('el-button', {
                props: {
                  size: 'mini'
                },

                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML: `<span style='color:#F75E5E;display: ${this.menuArr.includes('缓存管理删除') ? 'block' : 'none'}'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                },
                on: {
                  click: () => {
                    this.handleDeleteDel(params.row)
                  }
                }
              })
            ])
          }
        }
      ],
      cargotableData: [],
      // tableHeight: window.innerHeight - 210,
      loading: false,
      // 查询表单
      searchForm: {
        createName: '',
        releaseState: ''
      },
      // 角色列表数据
      queryInfo: {
        // 当前页数
        page: 1,
        // 每页显示多少数据
        pagesize: 15,
        totalNum: 1
      },
      isimportfolder: false,
      newCreateName: '',
      formDetail: {},
      editOrderShow: false,
      titleName: '用户详情',
      UserRightsData: []
    }
  },
  computed: {
    tableHeight() {
      return this.$store.state.tableHeight
    }
  },
  methods: {
    editOrderFun() {
      this.editOrderShow = false
    },
    // 根据用户id查询用户缓存角色权限
    download(row, type) {
      this.$http.get(
        `/${this.$ServiceName}/api/external/cachemanager/${this.$version}/getauthorizeinfos?userId=${row.userId}`
      ).then(res => {
        if (res.data.data == null) {
          return this.$message.info('暂无该用户权限详情信息')
        }
        this.titleName = '权限详情'
        this.editOrderShow = true
        this.UserRightsData = res.data.data.permissionList
      }).catch((error) => {
      })
    },
    // 根据用户id查询用户缓存角色权限
    downloadyonghu(row, type) {
      this.$http.get(
        `/${this.$ServiceName}/api/external/cachemanager/v1/getaccinfobyaccno?accNo=${row.accNo}`
      ).then(res => {
        if (res.data.data == null) {
          return this.$message.info('暂无该用户详情信息')
        }
        this.titleName = '用户详情'
        this.formDetail = res.data.data
        this.editOrderShow = true
      }).catch((error) => {
      })
    },
    // 搜索
    async searchClick() {
      this.queryInfo.page = 1
      this.getUserDataList()
    },
    // 获取用户table信息
    async getUserDataList() {
      this.loading = true
      // ?createName=${this.newCreateName
      await this.$http.get(
        `/${this.$ServiceName}/api/external/cachemanager/${this.$version}/selectuserlist?userName=${this.searchForm.createName}&pageSize=${this.queryInfo.pagesize}&pageNum=${this.queryInfo.page}`
      ).then(res => {
        this.cargotableData = res.data.data.cacheManagers
        // this.queryInfo.page = res.
        this.queryInfo = {
          // 当前页数
          page: res.data.data.pageNum,
          // 每页显示多少数据
          pagesize: 15,
          totalNum: res.data.data.totalNum
        },
        this.loading = false
      }).catch((error) => {})
    },
    // 是否确认删除
    async handleDeleteDel(row) {
      const confirmRes = await this.$confirm(
        '此操作将删除该用户信息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.deleteUserInfoDel(row)
    },
    // 删除
    async deleteUserInfoDel(row) {
      console.log(row)
      await this.$http.delete(
        `/${this.$ServiceName}/api/external/cachemanager/${this.$version}/cleancacheuserid?userId=${row.userId}&accNo=${row.accNo}`
      ).then(res => {
        this.$message.success(res.data.msg)
        this.UserRightsData = []
        this.formDetail = []
        this.getUserDataList()
      }).catch((error) => {})
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getUserDataList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.queryInfo.startpage = val
      this.getUserDataList()
    },
    visibleOrderChange(val) {
      this.isimportfolder = val;
      this.getUserDataList()
    }
  },
  async activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })

    if (menuId) {
      this.menuArr = []
      await this.$http.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.resourceName)
          })
        }).catch((error) => {})
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.searchForm = {
        createName: '',
        releaseState: ''
      }
      this.getUserDataList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  max-height: none !important;
}

/deep/.el-tabs__item:focus.is-active.is-focus:not(:active) {
  box-shadow: none !important;
}
/deep/.el-tabs__nav-wrap {
  padding: 0 20px;
  box-sizing: border-box;
}
/deep/.el-drawer__body > * {
  height: 100%;
}
.down_box {
  height: 50px;
  width: 100%;
  background-color: #fff;
}
.userBtn {
  z-index: 100;
  text-align: right;
  padding-right: 20px;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}
/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}
/deep/.el-tabs__content {
  position: initial !important;
}
.top {
  height: 80px;
}
.top2 {
  height: 30px;
}
/deep/ .el-collapse-item__header {
  background: #f5f7fa;
}
/deep/ .el-table thead {
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: #606266;
}
/deep/ #el-drawer__title {
  background: #f5f7fa;
}
#fiefooter /deep/ .el-select {
  width: 100%;
}
.yesgoods /deep/ .el-drawer__body {
  padding-top: 0;
}
.yesgoods .anniu {
  text-align: right;
  padding: 10px 20px 10px;
}

/deep/ .el-button + .el-button {
  margin-left: 0;
}
/deep/ .el-drawer__header {
  // margin-bottom: 12px;
  height: 40px;
  line-height: 41px;
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid gainsboro;
  margin-bottom: 0;
}

/deep/ .el-drawer__open .el-drawer.rtl {
  background: #f5f7fa;
}

/deep/ .el-drawer__body {
  overflow-y: auto;
  padding-bottom: 50px;
}
/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-collapse-item__header {
  padding-left: 19px;
  font-size: 16px;
}
/deep/ .el-breadcrumb {
  font-size: 16px;
}
/* 第一行居中 */
.el-table td:first-child,
el-table th:first-child,
.el-table td:last-child,
el-table th:last-child {
  text-align: center !important;
}

.container {
  .form_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /deep/.el-card__body {
    width: 100%;
    padding: 0;
    border-radius: 0;
  }
  .page {
    background: #ffffff;
    text-align: right;
    border-radius: 0 0 4px 4px;
    padding: 5px 20px;
  }

  .editBtn,
  .deleteBtn {
    color: #1684f6;
    border-color: transparent;
    background: transparent;
  }
  //分页
  .card_pagination {
    text-align: right;
  }
  .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
  }
}
.el-table {
  margin-bottom: 0 !important;
}
.el-table td {
  padding: 10px 0;
  text-align: left;
}

.form_item {
  margin-top: 20px;
}
.delete-button {
  border: none;
  background-color: transparent;
}
/deep/ .el-po {
  margin-right: 10000px;
}
.btn /deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 7px 6px;
}
// 查询表单start
.search_form {
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;

  /deep/.el-input {
    width: 150px;
  }
}
.box {
      border: 1px solid #e1e4eb;
      border-radius: 4px 4px 0 0;
      border-top: none;
    }
</style>

